<template>
  <view class="activityPage">
    <!-- :refresher-enabled="false" -->
    <view class="head" :style="[{ height: customBar + 'px' }]">
      <u-navbar
        title="活动列表"
        :autoBack="true"
        :titleStyle="{ fontSize: '34rpx', fontWeight: '500' }"></u-navbar>
    </view>
    <z-paging
      ref="paging"
      v-model="list"
      @query="queryList"
      loading-more-no-more-text="我也是有底线的！"
      default-page-size="5"
      :fixed="false">
      <view class="">
        <empty-view slot="empty" />
        <view
          class="reservationList"
          v-for="(item, index) in list"
          :key="index">
          <view class="reservationLeft">
            <image class="img" :src="HTTP_IMG_URL() + item.images"></image>
          </view>
          <view class="reservationRight">
            <view class="reservationName">{{ item.name }}</view>
            <view class="reservationLable">
              活动时间：{{ item.activity_time_text }}
            </view>
            <view class="activePrice">
              {{ item.price }}元 /人
              <view class="reservation" @click="handleReservat(item)">
                预约
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { HTTP_IMG_URL } from "../../config/app.js";
export default {
  data() {
    return {
      customBar: 88,
      jfVal: "",
      list: [],
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad() {},
  mounted() {
    // this.getList();
  },
  methods: {
    HTTP_IMG_URL() {
      return HTTP_IMG_URL;
    },
    handleReservat(val) {
      uni.navigateTo({
        url: "/pages/reservation/activeDetail?id=" + val.id,
      });
    },
    // @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
    queryList(pageNo, pageSize) {
      console.log(pageNo, pageSize, 33);
      var that = this;
      that.$Api.reservation
        .activityList({
          page: pageNo,
          pageSize: pageSize,
        })
        .then((res) => {
          // this.list = res.data.data;
          this.$refs.paging.complete(res.data.data);
          console.log(res.data, 23);
        })
        .catch((res) => {
          // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
          // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
          // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
          this.$refs.paging.complete(false);
        });
    },
    getList() {
      var that = this;
      that.$Api.reservation.activityList({}).then((res) => {
        this.list = res.data.data;
        console.log(res.data, 23);
      });
    },
  },
};
</script>

<style lang="scss">
.activityPage {
  height: 100%;
  min-height: 100vh;
  font-family: PingFang SC;
  background: #f5f5f4;
  padding: 0 32rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  .reservationList {
    width: 100%;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1),
      inset 0rpx 2rpx 2rpx 0rpx #ffffff;
    border-radius: 28rpx;
    margin-bottom: 20rpx;
    display: flex;
    padding: 20rpx 22rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .reservationLeft {
      width: 156rpx;
      height: 156rpx;
      background: #ffffff;
      border-radius: 28rpx;
      .img {
        width: 156rpx;
        height: 156rpx;
      }
    }
    .reservationRight {
      margin-left: 20rpx;

      width: 100%;

      .reservationName {
        font-weight: 500;
        font-size: 32rpx;
      }
      .reservationLable {
        display: flex;
        margin-top: 8rpx;
        flex-wrap: wrap;
        font-weight: 400;
        font-size: 26rpx;
        color: #565656;
      }
      .activePrice {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        font-size: 30rpx;
        color: #fd463e;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
        .reservation {
          width: 112rpx;
          height: 56rpx;
          background: linear-gradient(90deg, #c1ed1f 0%, #a3c616 100%);
          box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(162, 198, 22, 0.3);
          border-radius: 44rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #fff;
          line-height: 56rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
